<template>
  <div class="wrapper">
    <div class="time">{{minute}}:{{second}}</div>
    <el-steps :active="active" finish-status="success">
      <el-step title="题目 1"></el-step>
      <el-step title="题目 2"></el-step>
      <el-step title="题目 3"></el-step>
      <el-step title="题目 4"></el-step>
      <el-step title="题目 5"></el-step>
      <el-step title="题目 6"></el-step>
      <el-step title="题目 7"></el-step>
      <el-step title="题目 8"></el-step>
      <el-step title="题目 9"></el-step>
      <el-step title="题目 10"></el-step>
    </el-steps>
    <div class="question">
      <div class="title">{{problemName}}</div>
      <div>
        <div @click="next('A')" class="answer"><el-card shadow="hover" class="choose">A ：  {{problemA}}</el-card></div>
        <div @click="next('B')" class="answer"><el-card shadow="hover" class="choose" >B ：  {{problemB}}</el-card></div>
        <div @click="next('C')" class="answer"><el-card shadow="hover" class="choose">C ：  {{problemC}}</el-card></div>
        <div @click="next('D')" class="answer"><el-card shadow="hover" class="choose">D ：  {{problemD}}</el-card></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'examDetail',
  data () {
    return {
      active: 0,
      minutes: 30,
      seconds: 0,
      problemName: '',
      problemA: '',
      problemB: '',
      problemC: '',
      problemD: '',
      id: '',
      finish: false,
      answer: '',
      problem: ''
    }
  },
  methods: {
    next (answer) {
      if (this.active >= 9) {
        this.finish = true
        this.check()
      }
      this.addAnswer(answer)
      this.active++
      this.getData()
    },
    num (n) {
      return n < 10 ? '0' + n : '' + n
    },
    timer () {
      let _this = this
      let time = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0
          _this.check()
          window.clearInterval(time)
        } else {
          _this.seconds -= 1
        }
        if (_this.finish === true) {
          window.clearInterval(time)
        }
      }, 1000)
    },
    getData () {
      this.addProblem(this.$route.query.exam[this.active].problemNo)
      this.problemName = this.$route.query.exam[this.active].problemName
      this.problemA = this.$route.query.exam[this.active].problemA
      this.problemB = this.$route.query.exam[this.active].problemB
      this.problemC = this.$route.query.exam[this.active].problemC
      this.problemD = this.$route.query.exam[this.active].problemD
    },
    addProblem (problem) {
      if (this.problem !== '') {
        this.problem += ',' + problem
      } else {
        this.problem = problem
      }
    },
    addAnswer (answer) {
      if (this.answer !== '') {
        this.answer += ',' + answer
      } else {
        this.answer = answer
      }
    },
    check () {
      this.http.post(this.ports.exam.exam + this.id + '/check', {
        problem: this.problem,
        answer: this.answer
      }, res => {
        if (res.status === 200) {
          let data = res.data.result
          if (data.code === 200) {
            console.log(this.problem + this.answer)
            const loading = this.$loading({
              lock: true,
              text: '正在批改试卷，请稍等',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 1)'
            })
            setTimeout(() => {
              if (data.isPass === true) {
                this.$alert('恭喜你通过这个等级的考试！考试证书已发放，考试成绩为' + data.grade, '考试结果', {
                  confirmButtonText: '确定',
                  callback: action => {
                    loading.close()
                    this.$router.push('/exam')
                  }
                })
              } else {
                this.$alert('你未通过这个等级的考试！考试成绩为' + data.grade, '考试结果', {
                  confirmButtonText: '确定',
                  callback: action => {
                    loading.close()
                    this.$router.push('/exam')
                  }
                })
              }
            }, 2000)
          } else if (data.code === -1 || data.code === 1) {
            this.$message.error(data.msg)
          }
        } else {
          console.log(res)
        }
      })
    }
  },
  mounted () {
    this.getData()
    this.id = this.$route.query.id
    this.timer()
  },
  computed: {
    second: function () {
      return this.num(this.seconds)
    },
    minute: function () {
      return this.num(this.minutes)
    },
    ...mapState({
      current: 'current'
    })
  },
  watch: {
    current: function (val) {
      if (val === 0) {
        this.$router.push('/')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .wrapper {
    width: 70%;
    margin :1rem auto;
  }
  .wrapper /deep/ .el-step__head.is-success {
    color: rgba(240,20,20,.6) !important;
    border-color: rgba(240,20,20,.6) !important;
  }
  .wrapper /deep/ .el-step__title.is-success {
    color: rgba(240,20,20,.6) !important;
  }
  .wrapper /deep/ .el-step__head.is-process {
    color: rgba(240,20,20,.8) !important;
    border-color: rgba(240,20,20,.8) !important;
  }
  .wrapper /deep/ .el-step__title.is-process {
    color: rgba(240,20,20,.8) !important;
  }
  .question {
    margin: 70px auto;
    text-align: center;
  }
  .title {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .choose {
    text-align: left;
    width: 200px;
    height: 40px;
    cursor: pointer;
    margin: 10px auto;
    padding: 0;
    border: solid 1px #ccc;
    font-size: 14px;
    line-height: 5px;
  }
  .wrapper /deep/ .el-card{
    padding: 0;
  }
  .answer {
    width: 200px;
    margin: 0 auto;
  }
  .time {
    margin: 0.5rem auto;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>
